<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
import {ChatLineRound} from "@element-plus/icons-vue";

const userToken = ref(localStorage.getItem('user-token')?
    JSON.parse(localStorage.getItem('user-token')):null);
const arrDoctor = ref(0);
const arrAppointment = ref(0);
const arrAppointments = ref(0);
const arrToday = ref(0);

onMounted(()=>{
  if (userToken.value == null) {
    ElMessage.error("请先登录!");
    router.push('/patient/login');
    return;
  }

  axios.defaults.headers.common['Authorization']=userToken.value;

  axios.get(BASE_URL+"/v1/doctors/selectTotal").then((response) => {
    if (response.data.code===20000){
      arrDoctor.value=response.data.data;
    }else ElMessage.error(response.data.message)
  })
  axios.get(BASE_URL+"/v1/appointments/selectTotal").then((response) => {
    if (response.data.code===20000){
      arrAppointment.value=response.data.data;
    }else ElMessage.error(response.data.message)
  })
  axios.get(BASE_URL+"/v1/appointments/selectLastMonth").then((response) => {
    if (response.data.code===20000){
      arrAppointments.value=response.data.data;
    }else ElMessage.error(response.data.message)
  })
  axios.get(BASE_URL+"/v1/appointments/selectToday").then((response) => {
    if (response.data.code===20000){
      arrToday.value=response.data.data;
    }else ElMessage.error(response.data.message)
  })
})

const {useTransition} = require("@vueuse/core");

const source = ref(0)
const outputValue = useTransition(arrAppointment, {
  duration: 1500,
})
</script>

<template>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card style="height: 100px;">
          <el-statistic title="医生总人数" :value="arrDoctor" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 100px">
          <el-statistic title="已服务人数" :value="outputValue" />
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <el-card style="height: 100px">
          <el-statistic title="最近一个月预约数" :value="arrAppointments" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card style="height: 100px">
          <el-statistic title="今日已预约" :value="arrToday">
            <template #suffix>
              <el-icon style="vertical-align: -0.125em">
                <ChatLineRound />
              </el-icon>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
    </el-row>
  </el-card>

</template>

<style >

</style>